<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  
  <form action="" id="form1">
  <!-- autocomplete='off '//隐藏文本框的历史输入记录 不自动填充 -->
    用户名<input type="text" name="uname" autocomplete="off"/>密码<input type="password" name="upsw"> <button type="submit">提交</button>
  </form>
    <script>
    // 2.FormData对象管理表单数据  H5新增的 用于方便操作表单 
    // 注意 FormData 属于原生js对象 所以不要和jq的Serialize()搞混淆 (他俩的功能基本差不多 都是yic)
    // (1)FromData 可以模拟表单操作
    // var fd = new FormData()
    // fd.append('name', 'zs')//模拟
    // fd.append('age', 20)//模拟表单数据上传到后台
    // var xhr = new XMLHttpRequest()
    // xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
    // //最新的XMLHttpRequest level2 在发起post请求前 好像不用在写setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    // xhr.send(fd)
    // xhr.onreadystatechange = function () {
    //   if (xhr.readyState === 4 && xhr.status === 200) {
    //     console.log(xhr.responseText);
    //   }
    // }
    // (2)FormData可以一次性获取(form)表单里的值 DOM示例 
    // 注意使用次方法获取表单值 一定要给表单添加name属性否则获取不到值 切记
    // 操作dom获取表单
    // var form = document.querySelector('#form1')
    // form.addEventListener('submit', function (e) {
    //   // 阻止submit默认跳转行为
    //   e.preventDefault()
    //   // 获取form表单的数据 
    //   var fd = new FormData(form)
    //   // 发ajax请求
    //   var xhr = new XMLHttpRequest()
    //   xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
    //   // 数据上传到服务器
    //   xhr.send(fd)
    //   xhr.onreadystatechange = function () {
    //     if (xhr.readyState === 4 && xhr.status === 200) {
    //       var relust = JSON.parse(xhr.responseText)
    //       console.log(relust);
    //     }
    //   }
    // })
    </script>
</body>
</html>